<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			*{
			margin: 0;
			padding: 0;
			list-style: none;	
			}
			
			.top{
	width: 100%;
	height:3rem;
	
}

.top span{

	line-height: 2.9rem;
	text-align: center;

	
}
.top span:nth-child(1){
	width: 8%;
	height: 3rem;
	display: block;
	float: left;
	font-size: 1.53rem;
	/*margin-left: 0.31rem;*/
	
}

.top span:nth-child(2){
	width: 92%;
	height: 3rem;
	display: block;
	float: left;
	/*text-align: center;*/
	
}

.material{
	width: 100%;
	height: 8.25rem;
	background-color: #d82013;
	/*ease:(0.25, 0.1, 0.25, 1.0);*/
	transition:background-color 0.3s linear;
}

.left-head{
	width: 4.12rem;
	height: 4.12rem;
	background: white;
	float: left;
	margin-top: 3.12rem;
	margin-left: 1.12rem;
	border-radius: 50%;
	overflow: hidden;
}
.left-head img{
	width: 4.12rem;
	height: 4.12rem;
}

.right-skil{
	width: 15.62rem;
	height: 3.2rem;
	background: #d92013;
	float: left;
	margin-top: 4rem;
	margin-left: 0.92rem;
	line-height: 1.5rem;
	color: white;
}

.order{
	width: 100%;
	height: 3.12rem;
	/*background: red;*/
	border-bottom:1px solid lightgray ;
	
}

.order span{
	line-height: 3.12rem;
	font-size: 15px;
	

}
.order span:nth-child(1){
    	width: 66%;
		float: left;
		padding-left: 0.82rem;
}
.order span:nth-child(2){
	width: 30%;
	float: right;
	right: 0;
	
}
/*.No2{
		margin-left: 0.82rem;
	margin-right: 11.32rem;
	font-size: 15px;
}*/

.function{
	width: 100%;
	height: 5.68rem;
	background: white;
}

.function ul{
	display: flex;
}
.function ul li{
	flex: 1;
	text-align: center;
	margin-top: 0.92rem;
}
.twig{
	width: 100%;
	height: 1rem;
	background: whitesmoke;
}
.table ul li{
	width: 100%;
	height: 3.12rem;
	border-bottom: 1px solid whitesmoke;
}

.table ul li p{
	line-height: 3.12rem;
	float: left;
}
.table ul li p:nth-child(1){
	width: 78%;
	margin-left: 2.46rem;
	/*margin-right: 13.68rem;*/
	/*color: gray;*/
	
}
.table ul li p:nth-child(2){
	/*padding-left: 0.62rem;*/
	width: 10%;
	font-size: 25px;
	color: gray;

}

.bottom{
	width: 100%;
	height: 3.12rem;
	margin-top: 0.99rem;
	display: flex;
}
.bottom p{
	width: 15.25rem;
	height: 2.12rem;
	background: #e51b19;
	text-align: center;
	margin-left: 4.12rem;
	margin-right: 4.12rem;
	flex: 1;
	line-height: 2.12rem;
	border-radius: 0.31rem;
	color: white;
}
			
			
		</style>
	</head>
	<body>
		<div id="app">
   <div class="top">
	<span><</span>
  <span>会员中心</span>
   </div>
   
   
   
   <div class="material">
   	<div class="left-head">
   		<img src="./images/1.gif" alt="" />
   	</div>	
   	<div class="right-skil">	
   		<p>昵称</p>
   		<p>我的积分 : 0</p>
   	</div>
   	
   </div>
   
   <div class="order">
   	  <span class="No2">全部订单</span>
   	  <span>查看全部订单></span>
   </div>
   
   <div class="function">
   	<ul>
   		<li>
   			<img src="./images/pay.png"/>
   			<p>待支付</p>
   		</li>
   		
   		<li>
   			<img src="./images/shouhuo.png"/>
   			<p>待收货</p>
   		</li>
   		
   		<li>
   			<img src="./images/comment.png"/>
   			<p>待评价</p>
   		</li>
   	</ul>
   </div>
   <div class="twig"></div>
   
   <div class="table">
   	<ul>
   		
   		<li>
   			<p>个人资料</p>
   			<p>＞</p>
   		</li>
   		<li>
   			<p>地址管理</p>
   			<p>＞</p>
   		</li>
   		<li>
   			<p>绑定手机</p>
   			<p>＞</p>
   		</li>
   		<li>
   			<p>修改密码</p>
   			<p>＞</p>
   		</li>
   		<li>
   			<p>我的收藏</p>
   			<p>＞</p>
   		</li>
   	</ul>
   </div>
   
   <div class="bottom">
   	<p>登录/注册</p>
   	
   </div>
   
  </div>
		
	</body>
</html>
